<template>
	<view class="container">
		<TopNav title="异地签证"></TopNav>
		<view class="header">
			<subsection :list="sectionList" v-model="queryParams.status" @change="getList"></subsection>
		</view>
		<view class="main">

		</view>
		<view class="fixed-bottom bg-white p-lr16">
			<view class="self-btn full-width m-t6" hover-class="pressed" @click="$tab.navigateTo('./visa/apply')">
				<text>申请签证</text>
			</view>
		</view>
		<Empty :show="total === 0"></Empty>
	</view>
</template>

<script>
	import subsection from "@/components/subsection/index.vue";
	import Empty from "@/components/empty/index.vue"
	import mixins from "@/mixins"
	import { visaList } from "@/api/mine";
	export default {
		components: {
			subsection,
			Empty
		},
		mixins:[mixins],
		data() {
			return {
				list:[],
				queryParams: {
					status:'',
					page: 1,
					limit: 10
				},
				sectionList: [{
					label: "生效中",
					value: 5
				}, {
					label: "审核中",
					value: 0
				}, {
					label: "已拒绝",
					value: 4
				}, {
					label: "已通过",
					value: 1
				}, {
					label: "已失效",
					value: 6
				}]
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				visaList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count || 0
					this.pageTotal = total || 0
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/css/var.scss';

	page {
		@include fixed-bottom;
	}

	.container {
		.header {
			position: sticky;
			@include sticky-top;
			padding: 20rpx 24rpx;
		}
	}
</style>